<template>
    <div id='tel'>
        <!--评论数据的提交-->
        <div id='postcomment'>
            <h3>提交评论</h3>
            <p class='line'></p>
            <textarea placeholder='请输入评论内容' v-model='datacomment'></textarea>
            <mt-button type="primary" size="large" @click='postcomment'>发表</mt-button>
        </div>
            <p class='line'></p>
        <div id='listcomment'>
            <h3>评论列表</h3>
            <ul v-for='item in list'>
                <li >

                    <p>{{item.user_name}}  {{item.add_time |datafmt('YYYY-MM-DD HH:mm:ss')}}</p>
                    <div v-text='item.content'></div>
                </li>
            </ul>
        </div>
        <p class='line'></p>
        <mt-button type="primary" size="large" @click='getmore'>加载更多</mt-button>
    </div>

</template>

<script>
    import common from '../kits/common.js';
    import { Toast } from 'mint-ui';
    export default{
        props: ['id'],
        data(){
            return {
                datacomment: '',
                //创建list来显示列表
                list: [],
                pageindex: 1
            }
        },
        created(){
            this.getcommentlist(this.pageindex);
        },
        methods: {
            getcommentlist(pageindex){
                pageindex=pageindex||1;
                var url = common.apidomain + '/api/getcomments/' + this.id + '?pageindex=' + pageindex;
                this.$http.get(url).then(function (response) {
                    var body = response.body;
                    if (body.status != 0) {
                        Toast(body.message);
                        return
                    }
                    this.list=this.list.concat(body.message);
                })
            },
            postcomment(){
                if (this.datacomment.trim().length <= 0) {
                    Toast('您要提交的数据不能为空');
                    return;
                }
                var url = common.apidomain + '/api/postcomment/' + this.id;
                this.$http.post(url, {content:this.datacomment}, {emulateJSON: true}).then(function (response) {

                    var body = response.body;
                    if (body.status != 0) {
                        Toast(body.message);
                        return
                    }
                })

                 this.list=[{
                    "user_name": "匿名用户",
                    "add_time": new Date(),
                    "content": this.datacomment
                }].concat(this.list)
                this.datacomment='';
                Toast('数据提交成功');
            },

            getmore(){
                this.pageindex++;
                this.getcommentlist(this.pageindex);
            }
        }
    }
</script>

<style>
    #postcomment {
        padding: 10px;
    }
    #postcomment h3 {
        color: hotpink;
    }
    #postcomment .line {
        height: 1px;
        border-bottom: 1px solid rgba(0,0,0,0.3);
    }
    #listcomment {
        padding: 10px;
        color: #00ee00;
    }
    #listcomment ul {
        padding: 0;
    }
    #listcomment ul li {
        list-style: none;
        color: rgba(0,0,0,0.4);
    }


</style>